<template>
  <div>
    <div class="main-warper">
      <div class="left">
        <div class="user-info-search">
          <!-- <a-card style="height:250px;border-radius:5px;"> -->
          <div class="blog-info">
            <div class="avatar">
              <a-avatar :size="64" :src="adminInfo.avatar" />
            </div>
            <p v-if="adminInfo.sign" class="desc" v-text="adminInfo.sign" />
            <p v-else class="desc">
              追求完美，接受不完美
            </p>
          </div>
          <div class="data-info">
            <dl>
              <dt>{{ articleCount }}</dt>
              <dd>文章</dd>
            </dl>
            <dl>
              <dt>{{ userCount }}</dt>
              <dd>用户</dd>
            </dl>
            <dl>
              <dt>{{ commentCount }}</dt>
              <dd>评论</dd>
            </dl>
            <dl>
              <dt>{{ viewCount }}</dt>
              <dd>访问</dd>
            </dl>
          </div>
          <div class="left-user-self-links">
            <a-popover
              :get-popup-container="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
            >
              <template slot="content">
                <img
                  src="http://t14.baidu.com/it/u=3381022396,2841686915&fm=224&app=112&f=JPEG?w=500&h=500"
                >
              </template>
              <span class="qq">
                <a-icon type="qq" />
              </span>
            </a-popover>

            <a-popover
              :get-popup-container="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
            >
              <template slot="content">
                <img
                  src="http://t14.baidu.com/it/u=3381022396,2841686915&fm=224&app=112&f=JPEG?w=500&h=500"
                >
              </template>
              <span class="wechat">
                <a-icon type="wechat" />
              </span>
            </a-popover>
            <span class="github">
              <a href="https://www.baidu.com" target="_blank">
                <a-icon type="github" />
              </a>
            </span>
          </div>
          <!-- </a-card> -->
        </div>

        <!-- 分类 -->
        <div class="official-accounts-box">
          <h4>
            <i>
              <a-icon type="team" />
            </i>
            <span>分类专栏</span>
          </h4>
          <div class="timeline-list-box">
            <div
              class="all-category-title"
              @click="getArcicleListByCategory('')"
            >
              全部分类
            </div>
            <div
              v-for="item in categoryArticleCount"
              :key="item.cid"
              class="category-box"
            >
              <div
                class="item-box"
                :style="categoryId === item.cid ? original : ''"
                @click="getArcicleListByCategory(item.cid)"
              >
                <span>{{ item.name }}</span>
                <span>{{ item.counter }}篇</span>
              </div>
            </div>
          </div>
        </div>
        <div class="lastest-article-box">
          <div class="hotBlog">
            <h4>
              <i>
                <a-icon type="file-text" />
              </i>
              <span>最新文章</span>
            </h4>
            <ul>
              <li v-for="item in lasterArticle" :key="item.id">
                <a :href="`/article/${item.id}`" class="original">
                  {{ item.title }}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 技术交流 -->
        <div class="group-chat">
          <h4 class="title-box">
            <i>
              <a-icon type="qrcode" />
            </i>
            <span>技术交流</span>
          </h4>
          <div class="chat-box">
            <img src="@/assets/images/group_qq.png" alt="">
            <div class="detail">
              <p class="intro">
                QQ扫码进入交流群<br>一起探索神秘IT世界！
              </p>
              <p class="tel">
                群号：xxxxxxxxxx
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="content-centet">
        <!-- 轮播图 -->
        <div class="loop-box default-border-radius">
          <agile
            :autoplay-speed="5000"
            :autoplay="true"
            :dots="false"
            :nav-buttons="false"
          >
            <div v-for="item in loopList" :key="item.id">
              <img :src="item.imageUrl">
            </div>
          </agile>
        </div>

        <div v-if="!loading" class="article-list-box">
          <!-- top-article -->
          <div class="blog-list">
            <div
              v-for="item in articleTop"
              :key="item.id"
              class="blog-item-box"
            >
              <span v-if="item.statue === '3'" class="settop">置顶</span>
              <div class="cover-img-box hvr-grow">
                <img :src="item.cover">
              </div>
              <div class="article-info-box">
                <h4>
                  <NuxtLink :to="`/article/${item.id}`" class="original">
                    <span v-if="item.writeType==1" class="original">原创</span>
                    <span v-else-if="item.writeType==2" class="reprint">转载</span>
                    <span v-else class="derive">衍生</span>
                    {{ item.title }}
                  </NuxtLink>
                </h4>
                <p class="content">
                  <NuxtLink :to="`/article/${item.id}`" class="original">
                    {{ item.summary }}
                  </NuxtLink>
                </p>
                <div class="info">
                  <p>
                    <span>
                      <a-avatar size="small" :src="item.user.avatar" />
                    </span>
                    <span class="content-item-username">{{
                      item.user.userName
                    }}</span>
                    <span class="read-num">
                      <i>
                        <a-icon type="clock-circle" />
                      </i>
                      {{ dateformat(item.createTime) }}
                    </span>
                    <span class="read-num">
                      <i>
                        <a-icon type="eye" /> </i>{{ item.viewCount }}
                    </span>
                    <span class="read-num">
                      <i>
                        <a-icon type="message" /> </i>{{ item.type }}
                    </span>
                  </p>
                </div>
              </div>
            </div>
            <!-- noral-article start -->
            <div
              v-for="item in articleList.list"
              :key="item.id"
              class="blog-item-box"
            >
              <div class="cover-img-box hvr-grow">
                <!-- <figure class="hover-rotate"> -->
                <img :src="item.cover">
                <!-- </figure> -->
              </div>
              <div class="article-info-box">
                <h4>
                  <NuxtLink
                    :to="{ name: 'article-id', params: { id: item.id } }"
                    class="reprint"
                  >
                    <span v-if="item.writeType==1" class="original">原创</span>
                    <span v-else-if="item.writeType==2" class="reprint">转载</span>
                    <span v-else class="derive">衍生</span>
                    {{ item.title }}
                  </NuxtLink>
                </h4>
                <p class="content">
                  <NuxtLink
                    :to="{ name: 'article-id', params: { id: item.id } }"
                  >
                    {{ item.summary }}
                  </NuxtLink>
                </p>
                <div class="info">
                  <p>
                    <span>
                      <a-avatar size="small" :src="item.user.avatar" />
                    </span>
                    <span class="content-item-username">{{
                      item.user.userName
                    }}</span>
                    <span class="read-num">
                      <i>
                        <a-icon type="clock-circle" />
                      </i>
                      {{ dateformat(item.createTime) }}
                    </span>
                    <span
                      class="read-num"
                    ><i>
                      <a-icon type="eye" /> </i>{{ item.viewCount }}</span>
                    <span
                      class="read-num"
                    ><i>
                      <a-icon type="message" /> </i>{{ item.type }}</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- noral-article END -->
          </div>
        </div>
        <!-- 加载状态 -->
        <div v-else class="loading-box">
          <a-skeleton active />
        </div>
        <div
          v-if="articleList.list == null || articleList.list.length == 0"
          class="no-result-box"
        >
          <a-empty />
        </div>
        <!-- 分页 -->
        <div class="pagehelp">
          <div class="load-more">
            <!-- <a href="javascript: void(0);"
                           class="load-btn"
                           @click="getMoreArticle">
                            加载更多
                        </a> -->
            <a-pagination
              :total="articleList.total"
              size="small"
              :page-size="7"
              show-less-items
              @change="getMoreArticle"
            />
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 搜索框 -->
        <div class="article-search">
          <div class="search">
            <a-input-search
              placeholder="上下求索"
              @search="onSearch"
            />
          </div>
        </div>
        <!-- 热门文章 -->
        <div class="hottest-article-box">
          <div class="hotBlog">
            <h4>
              <i>
                <a-icon type="fire" />
              </i>
              <span>最热文章</span>
            </h4>
            <div class="hot-item">
              <ul
                v-for="(item, index) in HotArticle"
                :key="index"
                class="list"
                :class="{ last: index + 1 == HotArticle.length }"
              >
                <li class="index" :class="'index' + (index + 1)">
                  {{ index + 1 }}
                </li>

                <div class="label">
                  <a :href="`/article/${item.id}`">
                    {{ item.title }}
                  </a>
                </div>
              </ul>
            </div>
          </div>
        </div>
        <!-- 日历 -->
        <div class="calendarbox">
          <calendar />
        </div>
        <!-- 标签云 -->
        <div class="label-cloud-box">
          <h4>
            <i>
              <a-icon type="tags" />
            </i>
            <span>标签云</span>
          </h4>
          <WordCloud @func="getLabelName" />
        </div>
        <div class="helper-dream-box">
          <div class="looper-adv-box">
            <agile
              :autoplay-speed="3000"
              :autoplay="true"
              :dots="false"
              :nav-buttons="false"
            >
              <div v-for="(item,index) in advImg" :key="index">
                <a :href="item.url" target="_blank"> <img :src="item.imgPath"></a>
              </div>
            </agile>
          </div>
        </div>
        <!-- 广告 ---END -->
        <div class="word-box">
          <span>
            <marquee>
              <font face="隶书" size="3">
                {{ word }}
              </font>
            </marquee>
          </span>
        </div>
        <!-- 备案 -->
        <div class="beian-box">
          <div class="beian-info-box">
            <h6>Copyright © ambition (2020-2020）</h6>
            <h6><a href="https://beian.miit.gov.cn" target="_black">京ICP备2022008369号-1</a></h6>
            <h6><a>关于我们</a>|<a>联系我们</a>|<a>友情链接</a></h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import WordCloud from '../components/WordCloud'
import Calendar from '../components/swiget/Calender.vue'
import {
  getUserCount,
  getCommentCount,
  getViewCount,
  getArticleCount,
  getAdminInfo,
  getHottestArticle,
  getLasterArticle,
  getLoopList,
  getArticleTop,
  getArticleList,
  getCategoryArticleCount,
  getComparisonOperation
} from '@/api/api'
const advImg = [
  {
    title: '春分',
    imgPath: 'https://img0.baidu.com/it/u=92870014,2201902649&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=329',
    url: 'https://www.aliyun.com/'
  },
  {
    title: '夏至',
    imgPath: 'https://img1.baidu.com/it/u=2788218314,3466374865&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    url: 'https://cloud.tencent.com/'
  },
  {
    title: '秋分',
    imgPath: 'https://img1.baidu.com/it/u=2086257006,2978884402&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    url: 'https://www.huaweicloud.com/'
  },
  {
    title: '冬至',
    imgPath: 'https://img2.baidu.com/it/u=3898094553,174030222&fm=253&fmt=auto&app=138&f=PNG?w=499&h=281',
    url: 'https://www.huaweicloud.com/'
  }
]

export default {
  components: { WordCloud, Calendar },
  async asyncData ({ params }) {
    const [
      adminInfoRes,
      HotArticleRes,
      lasterArticleRes,
      articleCountRes,
      userCountRes,
      commentCountRes,
      viewCountRes,
      articleTopRes,
      articleListRes,
      categoryArticleCount,
      loopersRes
    ] = await Promise.all([
      await getAdminInfo(),

      await getHottestArticle(),

      await getLasterArticle(),

      await getArticleCount(),

      await getUserCount(),

      await getCommentCount(),

      await getViewCount(),

      await getArticleTop(),

      await getArticleList(1, 7),

      await getCategoryArticleCount(),
      await getLoopList()
    ])
    return {
      adminInfo: adminInfoRes.data,
      loopList: loopersRes.data,
      HotArticle: HotArticleRes.data.records,
      lasterArticle: lasterArticleRes.data.records,
      articleCount: articleCountRes.data,
      userCount: userCountRes.data,
      commentCount: commentCountRes.data,
      viewCount: viewCountRes.data.web_size_view_count,
      articleTop: articleTopRes.data,
      articleList: articleListRes.data,
      // pageCount: articleListRes.data.pages,
      categoryArticleCount: categoryArticleCount.data
    }
  },
  data () {
    return {
      advImg,
      loading: false,
      labelName: '',
      categoryId: '',
      keyword: '',
      pageNo: 1,
      pageSize: 6,
      original: {
        color: '#409eff'
      },
      // jinrisc config
      word: '正在加载今日诗词....'
    }
  },
  head () {
    return {
      title: 'King`s阅览室',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content:
            'King`s 阅览室，这是个人技术博客。主要包括系统定制(AOSP),JavaWeb开发，Vue技术，前端，Java开发'
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: 'King,博客,java,vue,nuxt,开发，博客系统，程序员，程序猿'
        }
      ]
    }
  },
  mounted () {
    this.loadSentence()
  },
  methods: {
    // jinrishici
    loadSentence () {
      const jinrishici = require('jinrishici')
      jinrishici.load(
        (result) => {
          this.word = result.data.content
        }
      )
    },
    // 加载更多
    getMoreArticle (pageNo, pageSize) {
      // this.pageSize += 4;
      getArticleList(pageNo, pageSize).then((res) => {
        if (res.code === 200) {
          this.articleList = res.data // 将请求回来的数据和上一次进行组合

          const doc = document.getElementById('layout-top-basic')
          if (doc) {
            doc.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
          }
          // this.pageCount = res.data.pages;
        } else {
          this.$message.error('系统出小差了，请您稍后重试!')
        }
      })
    },
    // 搜索文章
    onSearch (value) {
      this.keyword = encodeURIComponent(value.trim())
      // 如果输入为空，无效
      if (this.keyword === '') {
        return
      }

      this.$router.push({
        path: `/search/${this.keyword}`
      })
    },
    dateformat (value) {
      const dayjs = require('dayjs')
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取点击的标签名称
    getLabelName (value) {
      this.labelName = value
      this.getArticleList()
    },
    // 根据分类获取文章
    getArcicleListByCategory (record) {
      this.categoryId = record
      this.getArticleListByTerm()
    },
    getArticleListByTerm () {
      const pageNo = 1
      const pageSize = 7
      const label = this.labelName
      const categoryId = this.categoryId
      const timeline = ''
      this.loading = true
      getComparisonOperation(
        pageNo,
        pageSize,
        label,
        categoryId,
        timeline
      ).then((result) => {
        if (result.code === 200) {
          this.loading = false
          this.articleList = result.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-back-top {
  bottom: 0px;
  right: 3px;
}

.left {
  // height: 200px;
  width: 300px;
  float: left;
  margin-right: 10px;
  margin-top: 11px;

  //头像，总计，搜索
  .user-info-search {
    background: #FFFFFF;
    width: 300px;
    border-radius: 5px;

    //头像卡片
    .blog-info {
      padding: 20px;
      text-align: center;
      margin-left: 8px;
      width: 100%;

      .avatar {
        margin-right: 6px;
        font-size: 14px;
        font-weight: 500;
        color: #555666;
        line-height: 28px;
      }

      .desc {
        margin-top: 10px;
        color: #999aaa;
        font-size: 13px;
        line-height: 20px;
      }
    }

    .data-info {
      padding: 9px 0;
      margin: 0 5px;
      line-height: 22px;
      text-align: center;
      display: flex;
      border-bottom: solid 1px var(--border-color);

      dl {
        width: 100%;
        margin-bottom: 2px;

        dd {
          color: #999aaa;
        }
      }
    }

    .left-user-self-links {
      text-align: center;
      margin-top: 5px;

      /deep/ .ant-popover-inner-content {
        padding: 5px !important;
        > img {
          width: 80px;
          height: 80px;
        }
      }

      span {
        margin-left: 15px;
        margin-right: 15px;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
        color: #cacaca;
        &.qq:hover {
          color: #1AB6FF;
        }
        &.wechat:hover{
          color: #15D36A;
        }
        &.github:hover{
          color:#6F6F6F;
        }
      }
      a{
        color: #cacaca;
        &:hover {
          color: #909090;
        }
      }
    }
  }

  // 最新文章
  .lastest-article-box {
    margin-top: 10px;
    width: 300px;
    border-radius: 5px;
    background: #fff;

    .hotBlog {
      margin-bottom: 8px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
      padding: 13px 0;

      h4 {
        font-weight: normal;
        padding: 0 16px 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid #f3f3f3;
        color: #3d3d3d;
        height: 38px;
        line-height: 38px;

        i {
          vertical-align: middle;
          margin-right: 5px;
          color: #696363;
          font-size: 16px;
          line-height: 20px;
        }

        span {
          font-weight: bold;
          font-size: 15px;
          line-height: 38px;
          color: #3d3d3d;
        }
      }

      ul {
        margin-top: 10px;

        li {
          list-style-type: none;
          margin-left: 10px;

          a {
            text-align: left;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            display: block;
            // overflow: hidden;
            line-height: 25px;
            padding: 7px 8px;
            color: #6a6a6b;

            &:hover {
              background: #f2f6fc;
            }

            > span {
              float: right;
              line-height: 30px;
            }

            > i {
              float: left;
              line-height: 30px;
            }
          }
        }
      }
    }
  }
  // 分类
  .official-accounts-box {
    margin-top: 10px;
    // height: 220px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    padding: 16px 0;

    h4 {
      font-weight: normal;
      padding: 0 16px 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid #f3f3f3;
      color: #3d3d3d;
      height: 38px;
      line-height: 38px;

      i {
        vertical-align: middle;
        margin-right: 5px;
        color: #696363;
        font-size: 16px;
        line-height: 20px;
      }

      span {
        font-weight: bold;
        font-size: 15px;
        line-height: 38px;
        color: #3d3d3d;
      }
    }
    .timeline-list-box {
      .all-category-title {
        line-height: 30px;
        padding: 5px 5px;
        cursor: pointer;
        margin-left: 15px;
        margin-right: 15px;
        // color: #999aaa;
        &:hover {
          color: #7fc3fa;
          background: #f2f6fc;
        }
      }
      .category-box {
        .item-box {
          flex-direction: row;
          align-items: center;

          justify-content: space-between;

          display: flex;
          line-height: 30px;
          padding: 5px 5px;
          cursor: pointer;
          margin-left: 15px;
          margin-right: 15px;
          // color: #999aaa;
          &:hover {
            color: #7fc3fa;
            background: #f2f6fc;
          }
        }
      }
    }
  }

  // 交流方式
  .group-chat {
    border-radius: 5px;
    width: 300px;
    height: 190px;
    margin-top: 10px;
    margin-bottom: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    padding: 16px 0;

    h4 {
      font-weight: normal;
      padding: 0 16px 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid #f3f3f3;
      color: #3d3d3d;
      height: 38px;
      line-height: 38px;

      i {
        vertical-align: middle;
        margin-right: 5px;
        color: #696363;
        font-size: 16px;
        line-height: 20px;
      }

      span {
        font-weight: bold;
        font-size: 15px;
        line-height: 38px;
        color: #3d3d3d;
      }
    }

    .chat-box {
      padding: 0 16px;
      overflow: hidden;

      img {
        margin-top: 10px;
        float: left;
        width: 110px;
        height: 110px;
      }

      .detail {
        float: left;
        // width: 110px;
        margin-left: 8px;
        padding: 25.5px 0;

        .intro {
          color: #333333;
          text-align: center;
          line-height: 23px;
        }

        .tel {
          color: #555555;
          font-size: 12px;
          line-height: 23px;
          text-align: center;
        }
      }
    }
  }
}

// 右边布局样式
.right {
  float: left;
  width: 300px;
  margin-left: 10px;
  margin-top: 10px;

  // 搜索文章
  .article-search {
    text-align: center;
    height: 50px;
    width: 100%;
    border-radius: 5px;
    background: #fff;

    .search {
      padding: 10px 10px 10px;
    }
  }
  // 最热最新文章
  .hottest-article-box {
    margin-top: 10px;
    width: 300px;
    border-radius: 5px;
    background: #fff;
    h4 {
      font-weight: normal;
      padding: 0 16px 8px;
      margin-bottom: 3px;
      border-bottom: 1px solid #f3f3f3;

      i {
        vertical-align: middle;
        margin-right: 6px;
        color: #f44336;
        font-size: 16px;
        line-height: 20px;
      }

      span {
        font-weight: bold;
        font-size: 14px;
        line-height: 20px;
        color: #333;
      }
    }
    .hotBlog {
      margin-bottom: 8px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
      padding: 16px 0;
      .hot-item {
        .list {
          margin-top: 10px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
          // border-bottom: 1px solid #ddd;
          &.last {
            border-bottom: none;
          }
          .index {
            list-style-type: none;
            margin-left: 10px;
            color: #b0b0b0;
            text-align: center;
            width: 18px;
            height: 18px;
            line-height: 20px;
            background: #e8e8e8;
            border-radius: 4px;
            &.index1 {
              background: #7fc3fa;
              color: #fff;
            }
            &.index2 {
              background: #94cf96;
              color: #fff;
            }
            &.index3 {
              background: #faa90e;
              color: #fff;
            }
          }
          .label {
            cursor: pointer;
            padding: 5px 8px;
            width: 250px;
            font-size: 13px;
            flex: 2;

            flex-flow: row nowrap;
            justify-content: flex-start;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            display: block;
            line-height: 20px;
            // padding: 7px 8px;
            color: #6a6a6b;
            a {
              color: #6a6a6b;
            }
          }
        }
      }
    }
  }

  // 音乐播放盒
  .calendar-box {
    margin-top: 10px;
    height: 260px;
    background: #fff;
    border-radius: 5px;
  }

  // 标签
  .label-cloud-box {
    margin-top: 10px;
    background: #fff;
    border-radius: 5px;
    height: 280px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    h4 {
      font-weight: normal;
      padding: 0 16px 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid #f3f3f3;
      color: #3d3d3d;
      height: 38px;
      line-height: 38px;

      i {
        vertical-align: middle;
        margin-right: 5px;
        color: #696363;
        font-size: 16px;
        line-height: 20px;
      }

      span {
        font-weight: bold;
        font-size: 15px;
        line-height: 38px;
        color: #3d3d3d;
      }
    }
  }

  // 公众号

  // 赞助商广告
  .helper-dream-box {
    margin-top: 10px;
    // height: 240px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    padding: 5px 5px;

    .looper-adv-box {
      padding: 5px 5px;

      img {
        border-radius: 5px;
        width: 280px;
        height: 150px;
      }
    }
  }

  // 轮播字体
  .word-box {
    border-radius: 5px;
    margin-top: 10px;
    height: 40px;
    background: #fff;
    line-height: 40px;
  }
  // 备案信息
  .beian-box {
    border-radius: 5px;
    margin-top: 10px;
    height: 105px;
    background: #fff;
    .beian-info-box {
      text-align: center;
      margin-top: 1px;
      > h6 {
        color: #999aaa;
        width: 100%;
        padding: 0px 20px;
        line-height: 30px;
        > a {
          padding: 0px 5px;
        }
      }
    }
  }
}

.content-centet {
  // height: 200px;
  width: 629px;
  float: left;
  margin-top: 10px;
  //轮播图
  .loop-box {
    height: 250px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
  }

  .loop-box img {
    width: 100%;
    border-radius: 4px;
    height: 230px;
  }

  // 文章列表
  .article-list-box {
    margin-top: 10px;
    background: #fff;
    border-radius: 5px;

    .blog-list {
      .blog-item-box {
        padding: 16px 10px 12px 10px;
        border-bottom: 1px solid #f0f2f5;
        position: relative;
        overflow: hidden;

        .settop {
          position: absolute;
          right: 0;
          top: 0;
          background: #f44336;
          font-size: 0.6rem;
          color: #fff;
          transform: rotateZ(45deg) translateY(-55px);
          padding: 50px 25px 3px;
        }

        // 文章封面
        .cover-img-box {
          float: left;
          width: 150px;
          height: 100%;
          > img {
            border-radius: 5px;
            width: 150px;
            height: 100px;
          }
        }

        &:hover {
          background: #f2f6fc;
          h4 {
            a {
              &.original {
                color: @hover-color;
              }

              &.reprint {
                color: @hover-color;
              }
            }
          }
        }

        * {
          word-wrap: break-word;
        }

        .article-info-box {
          margin-left: 10px;
          float: left;

          h4 {
            font-weight: normal;

            a {
              display: block;
              word-break: break-all;
              color: #222226;
              font-size: 18px;
              line-height: 20px;
              font-weight: 500;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              max-width: 400px;

              span {
                vertical-align: 2px;
                display: inline-block;
                box-sizing: border-box;
                width: 34px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size: 12px;
                border-radius: 2px;

                &.original {
                  color: #fff;
                  background-color: #0088f5b3;
                }

                &.reprint {
                  color: #fff;
                  background-color: #ff5722b3;
                }
                &.derive{
                  color: #fff;
                  background-color: #4caf50b3;
                }
              }
            }
          }

          .content {
            margin-top: 6px;
            a {
              display: block;
              font-size: 14px;
              line-height: 22px;
              display: -webkit-box;
              color: #999aaa;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              max-width: 420px;
            }
          }

          .info {
            p {
              line-height: 24px;
              color: #5f6471;

              .content-item-username {
                font-weight: 600 !important;
                color: #666;
                font-size: 13px;
              }

              .read-num {
                color: #5f6471;
                margin-left: 16px;

                i {
                  color: #c8c8c8;
                  margin-right: 2px;
                }
              }
            }
          }
        }
      }
    }
  }
  // 状态加载
  .loading-box {
    width: 100%;
    margin-top: 10px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    > .ant-skeleton {
      padding: 10px;
      .ant-skeleton-content {
        background: #fff;
      }
    }
  }

  //无结果界面
  .no-result-box {
    border-radius: 5px;
    padding: 10px;
    background: #fff;
    margin: 10px 0;
  }

  //分页
  .pagehelp {
    line-height: 40px;
    height: 40px;
    text-align: center;
    background: #fcfcfc;
    margin-top: 10px;
    border-radius: 5px;

    .load-more {
      .load-btn {
        color: #5f6471;
        &:hover {
          color: @hover-color;
        }
      }
      > .ant-pagination {
        padding: 10px;
      }
    }
  }
}

.main-warper {
  max-width: 1249px;
  margin: 0px auto;
  // text-align: center;
}
</style>
